<template>
    <div>
        <!-- <dv-loading v-if="dvLoading" class="loading-class">{{loadingText}}</dv-loading> -->
        <div class="container1">
            <div class="common-title-flex">
                <div class="common-title-div"></div>
                <div class="common-title-text">数据筛选</div>
            </div>
            <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="80px" style="margin-bottom:-10px;margin-top:10px;">
                    <el-form-item label="咨询名称">
                        <el-input v-model="searchObj.consultationName" placeholder="请输入咨询名称" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="咨询类型">
                        <el-select v-model="searchObj.consultationType" placeholder="请选择咨询类型" clearable>
                            <el-option v-for="item in consultationTypeList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left:2rem;">
                        <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
                        <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
            </el-form>
        </div>
        <div class="container" style="margin-top:1rem;">
            <div class="common-list-class">
                <div style="display:flex;">
                    <div class="common-title-div"></div>
                    <div class="common-title-text">查询结果</div>
                </div>
                <div style="display:flex;">
                    <el-button type="primary" style="height:32px;" icon="el-icon-circle-plus-outline" @click="addConsultation">添加</el-button>
                </div>
            </div>
            <!-- 查询列表 -->
            <el-table :data="tableData" size="mini" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
                <el-table-column type="index" label="序号" width="50" align="center">
                </el-table-column>
                <el-table-column prop="consultationName" label="咨询名称" width="100"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="policeName" label="所属民警" width="130"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="consultationType" label="咨询类型" width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="releaseTime" label="发布时间" width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="releaseContent" label="发布内容" show-overflow-tooltip>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="350" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="editClick(scope.row)">修改</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-remove" @click="forbidClick(scope.row)">撤销</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row type="flex" justify="end">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
            </el-row>
        </div>
        <!-- 新增警员 和修改警员-->
        <el-dialog :title="isEditTitle" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="newaddFlag" width="50%" :before-close="handleClose" center>
            <el-form ref="inputObj" :model="inputObj" label-width="100px" :rules="rules">
                    <el-form-item label="广告名称" prop="advertiseName">
                        <el-input v-model="inputObj.advertiseName" placeholder="请输入广告名称" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="广告位置" prop="advertisePosition">
                        <el-input v-model="inputObj.advertisePosition" placeholder="请输入广告位置" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="起止时间" prop="time">
                       <el-date-picker
                       style="width:100%;"
                        v-model="inputObj.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="广告图片" prop="advertisePicture">
                        <el-upload
                            :limit="5"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog title="图片详情" :visible.sync="advertisePictureFlag" size="tiny" append-to-body>
                            <img width="100%" :src="advertisePictureImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="广告链接" prop="advertiseLink">
                        <el-input v-model="inputObj.advertiseLink" placeholder="请输入广告链接" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" :rows="5" show-word-limit maxlength="300" placeholder="请输入备注" v-model="inputObj.remark">
                        </el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">提 交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 警员详情 -->
        <el-dialog title="警员详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="40%" :before-close="detailsClose" center>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">登录账号</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.username}}</el-col>
            </el-row>
            <el-row type="flex" justify="center" >
                <el-col :span="4" class="bold-class">登录密码</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.userpwd}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">警员姓名</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.name}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">警员警号</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.code}}</el-col>
            </el-row>
            <el-row type="flex" justify="center" >
                <el-col :span="4" class="bold-class">手机号码</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.phone}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">所属责任区</el-col>
                <el-col :span="15" style="border:1px solid #eeeeee;padding-left:0.5rem;">
                    <div>
                         <el-tag
                            style="margin:1px;"
                            v-for="item in detailsObj.area"
                            :key="item.id"
                            effect="plain">
                            {{ item.label }}
                        </el-tag>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" >
                <el-col :span="4" class="bold-class">所属部门</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.apartment}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">当前岗位</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.currentPosition}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">座机/分机</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.telephone}}</el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="detailsClose">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import mixin from '@/mixin/mixin.js'; 
    export default {
        name: 'consultationManage',
        mixins: [mixin],
        data(){
            return {
                advertisePictureFlag:false,
                advertisePictureImageUrl:'',
                loading:false,
                uploadHeader:{
                  token:'1244567788'  
                },
                uploadUrl:'https://jsonplaceholder.typicode.com/posts/',
                rules:{
                    advertiseName: [
                        { required: true, message: '请输入广告名称', trigger: 'blur' }
                    ],
                    advertisePosition: [
                        { required: true, message: '请输入广告位置', trigger: 'blur' }
                    ],
                    time: [
                        { required: true, message: '请输入起止时间', trigger: 'change' }
                    ],
                    advertisePicture: [
                        { required: true, message: '请选择广告图片', trigger: 'blur' }
                    ],
                    advertiseLink: [
                        { required: true, message: '请输入广告链接', trigger: 'blur' }
                    ]
                },
                detailsObj:{
                    username:'12321123',
                    userpwd:'123',
                    name:'张三',
                    code:'123001',
                    phone:'1356454545',
                    area:[{
                        id:'1',
                        label:'六合区'
                    },{
                        id:'2',
                        label:'浦口区'
                    },{
                        id:'3',
                        label:'建业区'
                    },{
                        id:'4',
                        label:'大厂区'
                    },{
                        id:'5',
                        label:'秦淮区'
                    },{
                        id:'6',
                        label:'江宁区'
                    },{
                        id:'7',
                        label:'雨花台区'
                    },{
                        id:'8',
                        label:'溧水区'
                    },{
                        id:'9',
                        label:'高淳区'
                    }],
                    apartment:'部门22',
                    currentPosition:'当前位置11',
                    telephone:'025-21321312'
                },
                inputObj:{
                    advertiseName:'',
                    advertisePosition:'',
                    time:[],
                    advertiseLink:'',
                    remark:''
                },
                detailsFlag:false,
                isEditTitle:'',
                newaddFlag:false,
                pageSizes:[10, 15, 50, 100],
                pagesize:10,
                total:10,
                currentPage:1,
                tableData: [{
                    policeName: '张警官',
                    consultationName: '咨询名称1',
                    consultationType: '咨询类型1',
                    releaseTime:'2020-12-20',
                    releaseContent:'咨询内容11111111'
                    },{
                        policeName: '张警官',
                        consultationName: '咨询名称1',
                        consultationType: '咨询类型1',
                        releaseTime:'2020-12-20',
                        releaseContent:'咨询内容11111111'
                    },{
                        policeName: '张警官',
                        consultationName: '咨询名称1',
                        consultationType: '咨询类型1',
                        releaseTime:'2020-12-20',
                        releaseContent:'咨询内容11111111'
                    },{
                        policeName: '张警官',
                        consultationName: '咨询名称1',
                        consultationType: '咨询类型1',
                        releaseTime:'2020-12-20',
                        releaseContent:'咨询内容11111111'
                    }],
                searchObj:{
                    consultationName:'',
                    consultationType:''
                }
            }
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.advertisePictureImageUrl = file.url;
                this.advertisePictureFlag = true;
            },
            // 新建确认和修改确认
            submit(){
                // this.$axios({
                //     method: 'get',
                //     url: `${this.requestUrl}`,
                //     headers:{
                //         token:this.requestToken     
                //     },
                //     data: params,
                //     params: params
                // })
            },
            // 取消点击
            cancel(){
                this.newaddFlag = false;
                this.inputObj = {
                    username:'',
                    userpwd:'',
                    name:'',
                    code:'',
                    phone:'',
                    area:[],
                    apartment:'',
                    currentPosition:'',
                    telephone:''
                };
                this.$refs["inputObj"].resetFields();
            },
            // 取消点击
            handleClose(){
                this.cancel();
            },
            // 点击分页当前页多少数据
            handleSizeChange(val){
                this.pagesize = val;
            },
            // 点击分页页数
            handleCurrentChange(val){
                this.currentPage = val;
            },
            // 查询
            query() {
                console.log(this.searchObj);
            },
            //  重置
            reset(){
                this.searchObj={
                    consultationName:'',
                    consultationType:''
                }
            },
            // 删除
            deleteClick(row){
                this.$confirm('请确认是否删除该警员?', '删除', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
            },
            // 禁用
            forbidClick(){
                this.$confirm('请确认是否禁用该警员?', '禁用', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '禁用成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消禁用'
                });          
                });
            },
            // 新增
            addConsultation(){
                this.newaddFlag = true;
                this.isEditTitle = '新增广告';
            },
            // 详情
            detailsClick(row){
                this.detailsFlag = true;
            },
            // 详情关闭
            detailsClose(){
                this.detailsFlag = false;
            },
            // 修改
            editClick(){
                this.newaddFlag = true;
                this.isEditTitle = '修改广告';
                this.inputObj = {
                    username:'张三',
                    userpwd:'123',
                    name:'张警官',
                    code:'12322',
                    phone:'123456733',
                    area:['六合区','浦口区','建邺区'],
                    apartment:'请问我去',
                    currentPosition:'当前位置111',
                    telephone:'2132312'
                };
            }
        }
    }
</script>
<style scoped>
  .common-title-flex{
      display:flex;
  }
  .common-title-div{
      width:3px;
      height:16px;
      background-color:#368af7;
      margin-top:2px;
  }
  .common-title-text{
      margin-left:4px;
      font-size: 14px;
  }
  .common-list-class{
      display:flex;
      justify-content:space-between;
      margin-top:-10px;
  }
  .grey-class{
      color: grey;
      font-size: 14px;
      border:1px solid #eeeeee;
      height: 55px;
      text-align: center;
      line-height: 55px;
  }
  .bold-class{
      font-weight: bold;
      background: whitesmoke;
      border:1px solid #eeeeee;
      height: 55px;
      text-align: center;
      line-height: 55px;
  }
  .upload-file >>> .el-upload--text{
      border:none;
      width: 100px;
      height: 36px;
  }
</style>>